<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="author" content="DigitPaint BV. http://www.digitpaint.nl" />	

	<title>Skyline v3</title>

	<link href="undohtml.css?1195729478" media="screen" rel="stylesheet" type="text/css" />
	
	<script src="../vendor/mootools/mootools-core.js" type="text/javascript" charset="utf-8"></script>
	<script src="../vendor/mootools/mootools-more.js" type="text/javascript" charset="utf-8"></script>
	<script src="../src/skyline.js" type="text/javascript" charset="utf-8"></script>
	<script src="../src/drag.js" type="text/javascript" charset="utf-8"></script>	
	<script src="../src/sortable.js" type="text/javascript" charset="utf-8"></script>
  <style>
  div.test {
    clear: both;
    padding: 10px;
  }  
  .test1 .active dd{
    display: none;
  }
  
  .customactive{
    background: #f00;
  }
  
  ul.sortable{
    width: 200px;
    padding: 5px;
    border: 1px solid #eee;
  }
  ul.sortable li {
    color: black;
    background: none;    
    padding: 5px;
    background: #dee;
    margin-bottom: 6px;
  }
  
  span.handle {
    background: #000;
    color: #fff;
    float: left;
    margin-right: 5px;
    width: 15px;
    height: 15px;    
  }
  
  ul.sortable li.marker,
  .marker{
    width: 100%;
    padding: 0;
/*    position : absolute;    */
    height: 2px;
/*    width: 100px;*/
    background: #000;
  }
  
  </style>
<body>
  <div class="test test1">
    <h1>Sort with scroller and custom ghost </h1>
    <br/>
    <br/>
    <br/>
    <br/>            
    <div style="overflow: auto; height: 350px; width: 300px; border: 1px solid #f00; position: relative;" id="s0scroll">
      <div style="padding: 20px;">
        <p style="background: #f00; color: #fff; height: 100px">
          Some extra offset content.
        </p>
        <!-- <div style="position: relative"> -->
          <ul id="s0" class="sortable">
            <li id="i1"> <div class="section">Item 1 </div></li>
            <li id="i2"> <div class="section">Item 2 </div></li>
            <li id="i3"> <div class="section">Item 3 </div></li>
            <li id="i4"> <div class="section">Item 4 </div></li>
            <li id="i5"> <div class="section">Item 5 </div></li>
            <li id="i6"> <div class="section">Item 6 </div></li>
            <li id="i7"> <div class="section">Item 7 </div></li>                                
            <li id="i8"> <div class="section">Item 8 </div></li>
            <li id="i9"> <div class="section">Item 9 </div></li>
            <li id="i10"><div class="section">Item 10</div></li>
            <li id="i11"><div class="section">Item 11</div></li>
            <li id="i12"><div class="section">Item 12</div></li>
            <li id="i13"><div class="section">Item 13</div></li>
            <li id="i14"><div class="section">Item 14</div></li>                                
        
          </ul>
        <!-- </div> -->
      </div>
    </div>
  </div>
  <script type="text/javascript" charset="utf-8">
    var s = new Skyline.Sortable('s0', {
      clone: true, 
      revert: true, 
      offsetParent: "s0scroll"
    });
    var scr = new Scroller("s0scroll");
    
    s.addEvents({
      "start" : function(){ scr.start(); },
      "stop"  : function(){ scr.stop(); }
    })
    
    $("s0").getElements("li").each(function(el){
      el.set("html", el.get('html') + " " + JSON.encode(el.getPosition(el.getOffsetParent())))
    })
    
  </script>  
  
  
    <div style="overflow: auto; height: 350px; width: 300px; border: 1px solid #f00; position: relative;" id="s3scroll">
      <ul id="s3" class="sortable">
        <li id="i1">Item 1</li>
        <li id="i2">Item 2</li>
        <li id="i3">Item 3</li>
        <li id="i4">Item 4</li>
        <li id="i5">Item 5</li>
        <li id="i6">Item 6</li>
        <li id="i7">Item 7</li>                                
        <li id="i8">Item 8</li>
        <li id="i9">Item 9</li>
        <li id="i10">Item 10</li>
        <li id="i11">Item 11</li>
        <li id="i12">Item 12</li>
        <li id="i13">Item 13</li>
        <li id="i14">Item 14</li>                                  
      </ul>
    </div>
  </div>  
  
  <script type="text/javascript" charset="utf-8">
    var s = new Skyline.Sortable('s3', {clone: true, revert: true, offsetParent: "s3scroll"});
    var scr = new Scroller("s3scroll");
    
    s.addEvents({
      "start" : function(){ scr.start(); },
      "stop"  : function(){ scr.stop(); }
    })
    
    $("s3").getElements("li").each(function(el){
      el.set("html", el.get('html') + " " + JSON.encode(el.getPosition(el.getOffsetParent())))
    })
    
  </script>  
  
  <div class="test test1">
    <h1>Simple sort (no options)</h1>    

    <ul id="s1" class="sortable">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

  </div>
  <script type="text/javascript" charset="utf-8">
    new Skyline.Sortable('s1');        
  </script>

  <div class="test test2">
    <h1>Simple sort with handle (handle: "span.handle")</h1>    

    <ul id="s2" class="sortable">
      <li><span class="handle">&nbsp;</span> Item 1</li>
      <li><span class="handle">&nbsp;</span> Item 2</li>
      <li><span class="handle">&nbsp;</span> Item 3</li>
    </ul>

  </div>
  <script type="text/javascript" charset="utf-8">
    new Skyline.Sortable('s2',{handle: "span.handle"});
  </script>
  
</body>
</html>